<template>
  <div class="phoneDetails">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in swipe" :key="item.id">
        <img :src="item.swipe" alt="" />
      </van-swipe-item>
    </van-swipe>
    <div class="phone-info">
      <div class="phone-name">
        {{ phoneDetails.name }}
      </div>
      <div class="phone-content">
        <span class="phone-bright">{{
          "【" + phoneDetails.bright + "】"
        }}</span>
        {{ phoneDetails.title }}
      </div>
      <div class="phone-price">￥{{ phoneDetails.price }}</div>
    </div>
    <div class="bought-num">
      <span>购买数量:</span><van-stepper v-model="value" />
    </div>
    <van-tabs v-model="active">
      <van-tab title="图文详情">
        <div v-for="item in phoneDetails.Images" :key="item.id" class="tuwen">
          <img :src="item.one" alt="" />
        </div>
      </van-tab>
      <van-tab title="参数">
        <div v-html="phoneDetails.homePeizhi"></div>
      </van-tab>
    </van-tabs>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-goods-action-icon
        icon="cart-o"
        text="购物车"
        to="/my/cart"
        :badge="getCount"
      />
      <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="ADDCart"
      />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>
<script>
import { getPhoneDetails } from '../../../api'
import { mapGetters } from 'vuex'
import { Toast } from 'vant'
export default {
  computed: {
    ...mapGetters({
      getCount: 'cart/getCount'
    })
  },
  data() {
    return {
      active: 0,
      HomeList: [],
      phoneDetails: {},
      swipe: [],
      id: this.$route.params.id.split("&"),
      value: 1
    }
  },
  methods: {
    async getPhoneInfo() {
      const res = await getPhoneDetails()
      res.data.forEach(item => {
        if (item.id === Number(this.id[0])) {
          this.HomeList = item
        }
      })
      this.HomeList.data.forEach(item => {
        if (item.id === Number(this.id[1])) {
          this.phoneDetails = item
        }
      })
      this.swipe = this.phoneDetails.swiper

      // console.log(this.phoneDetails)
    },
    ADDCart() {
      const goodsinfo = {
        id: this.phoneDetails.id,
        name: this.phoneDetails.name,
        photos: this.swipe[0].swipe,
        price: this.phoneDetails.price,
        count: this.value,
        checked: true
      }
      this.$store.commit('cart/ADD_CART', goodsinfo)
      Toast('加入成功...')
    }
  },

  created() {
    this.getPhoneInfo()
  }
}
</script>
<style lang="scss" >
.my-swipe {
  height: 300px;

  img {
    display: block;
    margin: 0 auto;
    height: 280px;
  }
  .van-swipe__indicator {
    background-color: #000;
  }
}
.phone-info {
  padding: 20px;
  border-bottom: 1px solid #cecece;
  .phone-name {
    font-size: 20px;
    font-weight: 500;
    line-height: 35px;
  }
  .phone-content {
    text-align: justify;
    .phone-bright {
      font-size: 14px;
      margin-left: -10px;
      font-weight: 400;
      color: red;
    }
  }
  .phone-price {
    margin-top: 5px;
    font-size: 30px;
    color: red;
  }
}
.bought-num {
  height: 70px;

  padding-left: 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #cecece;
  span {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
  }
  .van-stepper {
    display: inline-block;
    margin-top: -5px;
    margin-left: 20px;
    display: flex;
    align-items: center;
    height: 50px;
    .van-stepper__minus,
    .van-stepper__plus {
      width: 40px;
      height: 30px;
      background-color: #fff;
      border: 1px solid #cecece;
      border-radius: 0;
    }
    .van-stepper__input {
      width: 50px;
      height: 30px;
      background-color: #fff;
      border: 1px solid #cecece;
    }
  }
}
.van-tabs__content {
  .tuwen {
    width: 414px;
    img {
      width: 100%;
    }
  }
}
</style>